<!-- 修改名字 -->
<template>
	<!-- 表单提交 -->
	<form class="form" @submit="sub">
		<view class="form-item">
			<view class="form-title">
				<view class="label"><text class="red">*</text>昵称</view>
				<!-- <view class="value">{{data.formData.title.length}}/50</view> -->
			</view>
			<view class="form-control">
				<input class="input" type="text" maxlength="50" v-model="data.formData.name" name="nickname" placeholder="请输入昵称" placeholder-class="placeholderStyle">
			</view>
		</view>
		<view class="form-submit form-submit-auto">
			<button :class="['btn btn-sr',{'btn-dis':isEmptyFormData}]" :disabled="isEmptyFormData" form-type="submit" hover-class="btnClickStyle">提交</button>
		</view>
	</form>
</template>
<script setup>
	import { reactive, computed } from 'vue';
	import { useStore } from 'vuex';
	import { onLoad } from '@dcloudio/uni-app';
	import { valid } from '@/subpages/common/utils/valid.js';
	import { updateNickName } from '@/subpages/common/api/customer/info.js';
	import { isEmpty } from '@/common/utils/index.js';
	onLoad((options) => {
		data.options = options;
		init();
	});
	const store = useStore();
	let eventChannel = null;
	const isEmptyFormData = computed(() => {
		return isEmpty(data.formData.name) || (data.formData.name == data.options.nickname);
	});
	const data = reactive({
		options: {},
		formData: {
			name: ''
		}
	});
	// 初始化数据
	function init() {
		data.formData.name = data.options.nickname;
	}
	// 提交
	function sub(e) {
		let subData = e.detail.value;
		let rules = [{
			value: subData.nickname,
			null: '请输入昵称',
			dataType: '2&36',
			error: '请输入昵称2-26个字符'
		}];
		const dataTypes = { dataTypes: { '2&36': /^[\w\W]{2,36}$/ }, tip: 1 };
		valid(rules, dataTypes).then(res => {
			subReq(subData);
		})
	}
	// 提交请求
	async function subReq(params) {
		await updateNickName(params);
		store.dispatch('app/init');
		setTimeout(() => {
			uni.navigateBack();
		}, 400)
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		padding-bottom: 140rpx;
		background-color: $bgColor;
	}
	.uni-date-editor--x {
		opacity: 0 !important;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	@import '@/common/css/form.scss';
	.form-submit {
		box-shadow: none;
	}
</style>
